<!DOCTYPE html>
<html>
<head>
    <title>Solidification Curve</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Drawing parameters
        const originX = 60;
        const originY = 400;
        const axisLengthX = 450;
        const axisLengthY = 380;
        
        // Key points on the graph (canvas coordinates)
        const p_start = { x: originX, y: 50 };
        const p_t2 = { x: originX + 130, y: 220 };
        const p_t3 = { x: originX + 280, y: 220 };
        const p_t4 = { x: originX + 420, y: originY };

        // Calculate position for t1
        const x_t1 = originX + 70;
        const slope1 = (p_t2.y - p_start.y) / (p_t2.x - p_start.x);
        const y_t1 = p_start.y + slope1 * (x_t1 - p_start.x);
        const p_t1 = { x: x_t1, y: y_t1 };

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // Helper function to draw text with subscript
        function drawSubscriptText(ctx, text, sub, x, y, font) {
            const mainFont = `italic ${font.size}px ${font.family}`;
            const subFont = `italic ${font.size * 0.7}px ${font.family}`;
            
            ctx.font = mainFont;
            const textWidth = ctx.measureText(text).width;
            ctx.fillText(text, x, y);

            ctx.font = subFont;
            ctx.fillText(sub, x + textWidth, y + font.size * 0.2);
        }

        // --- Main Drawing ---

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw Axes
        ctx.beginPath();
        drawArrow(ctx, originX, originY, originX, 20); // Y-axis
        drawArrow(ctx, originX, originY, originX + axisLengthX, originY); // X-axis
        ctx.stroke();

        // 2. Draw Axis Labels
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('T', originX - 35, 45);
        ctx.font = '20px Times New Roman';
        ctx.fillText('/°C', originX - 20, 45);
        
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('t', originX + axisLengthX - 10, originY + 25);
        ctx.font = '20px Times New Roman';
        ctx.fillText('/s', originX + axisLengthX + 2, originY + 25);
        
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('O', originX - 25, originY + 25);

        // 3. Draw the graph line
        ctx.beginPath();
        ctx.moveTo(p_start.x, p_start.y);
        ctx.lineTo(p_t2.x, p_t2.y);
        ctx.lineTo(p_t3.x, p_t3.y);
        ctx.lineTo(p_t4.x, p_t4.y);
        ctx.stroke();
        
        // 4. Draw dashed lines and time labels
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.setLineDash([5, 5]);

        // Dashed line for t1
        ctx.beginPath();
        ctx.moveTo(p_t1.x, p_t1.y);
        ctx.lineTo(p_t1.x, originY);
        ctx.stroke();

        // Dashed line for t2
        ctx.beginPath();
        ctx.moveTo(p_t2.x, p_t2.y);
        ctx.lineTo(p_t2.x, originY);
        ctx.stroke();

        // Dashed line for t3
        ctx.beginPath();
        ctx.moveTo(p_t3.x, p_t3.y);
        ctx.lineTo(p_t3.x, originY);
        ctx.stroke();
        
        // Reset line dash
        ctx.setLineDash([]);

        // Time labels with subscripts
        const fontInfo = { size: 20, family: 'Times New Roman' };
        ctx.textAlign = 'center';
        drawSubscriptText(ctx, 't', '1', p_t1.x, originY + 25, fontInfo);
        drawSubscriptText(ctx, 't', '2', p_t2.x, originY + 25, fontInfo);
        drawSubscriptText(ctx, 't', '3', p_t3.x, originY + 25, fontInfo);
        drawSubscriptText(ctx, 't', '4', p_t4.x, originY + 25, fontInfo);

    </script>
</body>
</html>